<template>
  <div style="width: calc(100% - 316px)">
    <div class="storeHeader" v-loading="loading">
      <div class="storeHeader-top flex align-items-center">
        <span class="storeHeader-name">{{ storeInfo.storeName }}</span>
        <div class="tag tag1">{{ storeInfo.managementWay===1 ? '直营' : '加盟' }}</div>
        <div v-if="brandText" class="tag tag2">{{ brandText }}</div>
        <div class="storeHeader-info flex align-items-center">
          <el-image class="storeHeader-infoIcon" :src="position"></el-image>
          <span>{{ storeInfo.fullAddr }}</span>
        </div>
        <div class="storeHeader-info flex align-items-center">
          <el-image class="storeHeader-infoIcon" :src="floor"></el-image>
          <span>{{ addressText }}</span>
        </div>
      </div>
      <div class="storeHeader-bottom">
        <div class="storeHeader-bottomItemBox" v-for="(item, index) in headerConfig" :key="index">
          <div class="storeHeader-bottomItemBox-left" :style="{ background: item.leftBgColor }">
            <div class="storeHeader-bottomItemBox-leftNum" :style="{ color: item.leftColor }">{{ item.leftNum }}</div>
            <div class="storeHeader-bottomItemBox-name">{{ item.leftName }}</div>
          </div>
          <div class="storeHeader-bottomItemBox-right" :style="{ background: item.rightBgColor }">
            <div class="storeHeader-bottomItemBox-rightNum" :style="{ color: item.rightColor }">{{ item.rightNum }}</div>
            <div class="storeHeader-bottomItemBox-name">{{ item.rightName }}</div>
          </div>
        </div>
        <div v-for="item in suppliesConfig" :key="item.name" :style="{ background: item.bgColor }" class="suppliesItemBox">
          <div class="suppliesItemBox-num" :style="{ color: item.color }">{{ item.num }}</div>
          <div class="storeHeader-bottomItemBox-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="btn-opea">
        <el-radio-group v-model="groupType" @change="groupTypeChange">
          <el-radio-button v-for="item in groupTypeOptions" :key="item.value" :label="item.label" />
        </el-radio-group>
      </div>
    <div class="storeTable">
      
      <SeachTable class="mySeachTable" :tableType="1" ref="seachTableRef"
        :forms="tableForms" :btnLefts="btnLefts" :tableLoading="tableLoading" :tableConfig="tableConfig"
        :tableData="tableData" :totalPage="totalPage" @handlerSearch="handlerSearch">
        <template #product="{ row }">
          <span @click="jumpToDetail(row)" style="color: #3480FF;cursor: pointer;">{{ row.code }}</span>
        </template>
        <template #productName="{ row }">
          <div class="flex align-items-center">
            <el-image :src="row.firstPicture" class="myImg" fit="contain"></el-image>
            <div class="productInfo">
              <div class="uni-ellipsis productInfo-name">{{ row.name }}</div>
              <div v-if="['产品','物资'].includes(groupType)" class="productInfo-spec">
                {{ row.specification }}
              </div>
            </div>
          </div>
        </template>
      </SeachTable>
    </div>
  </div>
</template>

<script setup>
import { useDimensionality } from './hooks'
import { useStoreTableConfig,useStoreHeaderConfig } from './storeTable';
import { useConfirm } from '@/hooks/index'
import position from '@/assets/icon/position.png'
import floor from '@/assets/icon/floor.png'
import { getProductByStore,updateSaleStatus,getStoreInfo } from '@/api/BusinessScope/commodityControl'

const router = useRouter()
const {storeItemDetail,brandList} = useDimensionality()

const {
  productForm,
  productTableConfig,
  projectForm,
  projectTableConfig,
  setMealForm,
  setMealTableConfig,
  suppliesForm,
  suppliesTableConfig,
  treatmentCourseForm,
  treatmentCourseTableConfig } = useStoreTableConfig()
const {
  headerConfig,
  suppliesConfig } = useStoreHeaderConfig()
const groupType = ref('产品')
const groupTypeOptions = [
  {
    value: 1,
    label: '产品',
    routeName:'ProductManagementDetail'
  },
  {
    value: 2,
    label: '项目',
    routeName:'ProjectManagementDetail'
  },
  {
    value: 3,
    label: '套餐',
    routeName:'PackageManagementDetail'
  },
  // {
  //   value: 7,
  //   label: '疗程',
  //   routeName:'CureManagementInfo'
  // },
  {
    value: 4,
    label: '物资',
    routeName:'MaterialsManagementDetail'
  }]
const classify = computed(() => {
  return groupTypeOptions.find(item => item.label === groupType.value).value
})
const groupTypeChange = async (val) => {
  switch (val) {
    case '产品':
      tableForms.value = [
        ...productForm.value,
      ]
      tableConfig.value = [
        ...productTableConfig.value,
        action
      ]
      break;
    case '项目':
      tableForms.value = [
        ...projectForm.value,
      ]
      tableConfig.value = [
        ...projectTableConfig.value,
        action
      ]
      break;
    case '套餐':
      tableForms.value = [
        ...setMealForm.value,
      ]
      tableConfig.value = [
        ...setMealTableConfig.value,
        action
      ]
      break;
    case '物资':
      tableForms.value = [
        ...suppliesForm.value,
      ]
      tableConfig.value = [
        ...suppliesTableConfig.value,
      ]
      break;
    case '疗程':
      tableForms.value = [
       ...treatmentCourseForm.value,
      ]
      tableConfig.value = [
        ...treatmentCourseTableConfig.value,
        action
      ]
      break;
    default:
      tableForms.value = [
        ...productForm.value,
      ]
      tableConfig.value = [
        ...productTableConfig.value,
        action
      ]
      break;
  }
  seachTableRef.value.initSearch()
}

watch(storeItemDetail,(newVal)=>{
  if(newVal.id){
    _getStoreInfo()
    seachTableRef.value && seachTableRef.value.initSearch()
  }
},{
  deep:true
})

const loading = ref(false)
const storeInfo = ref({})
const brandText = computed(()=>{
  const ids = storeInfo.value.brandId?.split(',') ?? []
  return ids.map(id=>brandList.find(item=>item.value===id)?.label).filter(item=>item).join(' / ') || ''
})
const addressText = computed(()=>{
  const province = storeInfo.value.province 
  const city = storeInfo.value.city ? '-'+storeInfo.value.city : ''
  const area = storeInfo.value.area ? '-'+storeInfo.value.area : ''
  return province+city+area
})
const _getStoreInfo = async ()=>{
  try{
    loading.value = true
    const res = await getStoreInfo({
      storeId: storeItemDetail.value.id,
      enterpriseId: storeItemDetail.value.enterpriseId
    })
    storeInfo.value = res.storeInfo
    headerConfig.value.forEach(item =>{
      const fItem = res.storeStatistics.find(f => f.classify === item.classify)
      if(fItem){
        item.leftNum = fItem.count
        item.rightNum = fItem.mallCount
      }
    })
    suppliesConfig.value.forEach(item =>{
      const fItem = res.storeStatistics.find(f => f.classify === item.classify)
      if(fItem){
        item.num = fItem.count
      }
    })
  }finally{
    loading.value = false
  }
}

const seachTableRef = ref()
const tableLoading = ref(false)
const tableData = ref([])
const totalPage = ref(0)
const handlerSearch = async (data) => {
  try{
    if(!storeItemDetail.value.id) return
    tableLoading.value = true
    const res = await getProductByStore({
      ...data,
      storeId:storeItemDetail.value.id,
      classify:classify.value,
      enterpriseId:storeItemDetail.value.enterpriseId
    })
    tableData.value = res.records
    totalPage.value = res.total
  }finally{
    tableLoading.value = false
  }
}
const jumpToDetail = (row)=>{
  router.push({
    name: groupTypeOptions.find(item => item.label === groupType.value).routeName,
    query: {
      id:row.id
    }
  })
}
const batchOperation = (isDisable,row) => {
  let text = isDisable ? '停售' : '恢复销售'
  ElMessageBox.confirm(`确定要${text}吗？`, '提示', {
    type: 'warning',
    beforeClose: async (action, instance, done) => {
      const params = {
        saleStateDTOS:[{
          storeId:storeItemDetail.value.id,
          enterpriseId:storeItemDetail.value.enterpriseId,
          baseId:row.id,
          classify:classify.value,
          saleStatus:isDisable ? 2 : 1
        }]
      }
      const res = await useConfirm(action, instance, done, updateSaleStatus,params)
      if (res) {
        ElMessage.success(`${text}成功`)
        seachTableRef.value.handlerSearch()
      }
    },
  })
}
const action = {
  type: 'action',
  label: '操作',
  fixed: "right",
  width: 130,
  btns: [
    {
      label: () => '立即停售',
      type: 'danger',
      show: (row) => row.salesState === 1,
      click: (row) => {
        batchOperation(true,row)
      }
    },
    {
      label: () => '恢复销售',
      type: 'primary',
      show: (row) => row.salesState === 2,
      click: (row) => {
        batchOperation(false,row)
      }
    }
  ]
}
const btnLefts = ref([])
const tableForms = ref([
  ...productForm.value,
])
const tableConfig = ref([
  ...productTableConfig.value,
  action
])

</script>

<style lang="less" scoped>
div{
  box-sizing: border-box;
}
:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-left: 1px solid #3480FF;
}

.storeTable {
  // width: calc(100% - 316px);
  height: calc(100vh - 288px);
  overflow: hidden;
  background-color: #fff;

  
}
.btn-opea {
    padding-top: 12px;
    padding-left: 12px;
    background-color: #fff;
  }

.mySeachTable {
  // height: calc(100% - 56px) !important;
  background-color: #fff;

  :deep(.line-block) {
    display: none;
  }

  :deep(.btn-area) {
    display: none;
  }

  :deep(.defaultTable) {
    height: calc(100% - 135px) !important;
  }
}

.myImg {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 4px;
  border: 1px solid #DDD;
  margin-right: 8px;
}

.productInfo {
  width: 200px;

  .productInfo-name {
    font-size: 14px;
    color: #222;
    font-weight: bold;
  }

  .productInfo-spec {
    font-size: 14px;
    color: #666;
  }
}

.storeHeader {
  width: 100%;
  background-color: #fff;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 12px;

  .storeHeader-top {
    margin-bottom: 12px;
  }

  .storeHeader-name {
    margin-right: 12px;
    font-size: 20px;
    color: #000;
  }

  .tag {
    font-size: 14px;
    color: #fff;
    padding: 7px 8px;
    border-radius: 4px;
  }

  .tag1 {
    background: var(--y--, #FFAB00);
    margin-right: 8px;
  }

  .tag2 {
    background: var(--y--, #3480FF);
    margin-right: 12px;
  }

  .storeHeader-info {
    margin-right: 12px;
    font-size: 14px;
    color: #666;

    .storeHeader-infoIcon {
      width: 14px;
      height: 14px;
      margin-right: 4px;
    }
  }

  .storeHeader-bottom {
    display: flex;
    align-items: center;
    gap:12px;

    .storeHeader-bottomItemBox {
      display: flex;
      align-items: center;
      height: 60px;
    }

    .storeHeader-bottomItemBox-left {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      width: 106px;
      height: 100%;
      -webkit-clip-path: polygon(0% 0%, 85% 0, 100% 50%, 85% 100%, 0% 100%);
      clip-path: polygon(0% 0%, 85% 0, 100% 50%, 85% 100%, 0% 100%);
    }

    .storeHeader-bottomItemBox-right {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      margin-left: -15px;
      width: 118px;
      height: 100%;
      -webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 15% 50%, 0% 0%);
      clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 15% 50%, 0% 0%);
    }

    .storeHeader-bottomItemBox-leftNum {
      font-size: 20px;
      font-weight: bold;
      line-height: 20px;
      margin-bottom: 4px;
    }

    .storeHeader-bottomItemBox-rightNum {
      font-size: 16px;
      font-weight: bold;
      line-height: 16px;
      margin-bottom: 4px;
    }

    .storeHeader-bottomItemBox-name {
      font-size: 12px;
      color: #000;
    }

    .suppliesItemBox {
      display: flex;
      width: 118px;
      height: 60px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      background: #FFF0E5;

      .suppliesItemBox-num {
        font-size: 20px;
        font-weight: bold;
        color: #FF6B00;
        line-height: 20px;
        margin-bottom: 4px;
      }
    }
  }
}</style>